import React, { useState, useEffect } from 'react';
import { withRouter } from 'react-router-dom';
import { Breadcrumb, message, Spin } from 'antd';
import RedactContent from '../../../components/redactContent';
import Api from '../../../util/apiUrl';
import style from './index.module.css';
// const { Content } = Layout;

const AlterArticle = (props) => {
  console.log('AlterArticle', props);
  const [isLoading, setIsLoading] = useState(false);
  const [articleData, setArticleData] = useState({});

  useEffect(() => {
    if (props.match && props.match.params && props.match.params.id) {
      props.changeDefaultSelectedKeys();
      getArticle();
    } else {
      message.error('没有文章id,请先进入文章列表再点击修改');
    }
  }, []);

  //   获取文章数据
  const getArticle = () => {
    // if (props.match && props.match.params && props.match.params.id) {
    setIsLoading(true);
    Api.getArticle(props.match.params.id)
      .then((res) => {
        console.log('获取到文章', res);
        setIsLoading(false);
        setArticleData(res.data[0]);
      })
      .catch((err) => {
        console.log('获取文章错误', err);
        setIsLoading(false);
      });
    // } else {
    //   message.error('没有文章id');
    // }
  };
  return (
    <>
      {isLoading ? (
        <div className={style.container}>
          <Spin size="large" className={style.spin} />
        </div>
      ) : null}
      <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>文章</Breadcrumb.Item>
        <Breadcrumb.Item>修改文章</Breadcrumb.Item>
      </Breadcrumb>
      {/* <Content
        className="site-layout-background"
        style={{
          // padding: 24,
          margin: 0,
          minHeight: 280,
        }}
      > */}
      {
          (props.match && props.match.params && props.match.params.id)?<RedactContent articleData={articleData} />:null
      }
      

      {/* </Content> */}
    </>
  );
};

export default withRouter(AlterArticle);
